.warpper {

  $color1: #03a9f4;
  $color2: #f441a5;
  $color3: #ffeb3b;
  $color4: #09a8f4;




  width                : 100%;
  height               : 700px;
  display              : grid;
  grid-template-columns: repeat(3, 1fr);

  >div {
    display        : grid;
    justify-content: center;
    align-items    : center;
    position       : relative;

    span,
    a,
    label {
      position                  : relative;
      display                   : block;
      margin-bottom             : 20px;
      width                     : 150px;
      height                    : 40px;
      line-height               : 40px;
      font-size                 : 24px;
      text-decoration           : none;
      color                     : #fff;
      background-image          : linear-gradient(to right, $color1, $color2, $color3, $color4);
      background-size           : 400%;
      border-radius             : 20px;
      // z-index                : 1;

      &::before {
        position        : absolute;
        content         : "";
        top             : -2px;
        right           : -2px;
        bottom          : -2px;
        left            : -2px;
        background-size : 410%;
        border-radius   : 20px;
        background-image: linear-gradient(to right, $color1, $color2, $color3, $color4);
        z-index         : -1;
        filter          : blur(5px);
        user-select     : none;
        cursor          : pointer;
      }

      &:hover {
        color    : #fff;
        animation: streamer 8s infinite;

        &::before {
          animation: streamer 8s infinite;
        }
      }

    }

    input {
      display: none;
    }

    .animate {
      width      : 100px;
      height     : 100px;
      line-height: 100px;
      margin     : 50px auto;
      background : $color4;
      animation  : move 2.5s linear infinite alternate;
      font-size  : 32px;
    }

    @keyframes streamer {
      100% {
        background-position: 400% 0;
      }
    }

    .animate {
      width        : 100px;
      height       : 100px;
      margin       : 50px auto;
      background   : $color4;
      animation    : move 1.5s linear infinite alternate;
      font-size    : 32px;
      border-radius: 50%;
    }

    // todo id选择器失效
    .stop:hover~.animate,
    .stop_one:target~.animate,
    .stop_two:checked~.animate {
      animation-play-state: paused;
    }

    .play_one:target~.animate,
    .play_two:checked~.animate {
      animation-play-state: running;
    }


    @keyframes move {
      0% {
        transform: translate(-80px, 0);
      }

      100% {
        transform: translate(80px, 0);
      }
    }
  }
}